﻿@model InstallModel
@using CAF.WebSite.Mvc.Models.Install;
@using CAF.WebSite.Mvc.Infrastructure.Installation;

@{
    // localization service for installation service
    // we do not use standard smnet localization because database is not installed yet
    // locale resources fpr installation process are stored into \App_Data\Localization\Installation directory
    var ILS = EngineContext.Current.Resolve<IInstallationLocalizationService>();
}
<!DOCTYPE html>
<html>
<head>
    <title>@ILS.GetResource("Title")</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

    <script>
        window.Res = {
            "Common.Notification": "@ILS.GetResource("Common.Notification").EncodeJsString()",
        }
    </script>
    @* styles *@
    <link href='~/Content/assets/global/plugins/font-awesome/css/font-awesome.css' type='text/css' rel='stylesheet' />
    <link href="~/Content/assets/global/plugins/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href='~/Content/assets/global/css/components.css' type='text/css' rel='stylesheet' />
    <link href='~/Content/install/install.css' type='text/css' rel='stylesheet' />
    <link href="~/Content/throbber/throbber.css" rel="stylesheet" />
    @* scripts (head) *@
    <script src='~/Scripts/modernizr-2.8.3.js' type='text/javascript'></script>
    <script src='~/Content/assets/global/plugins/jquery.min.js' type='text/javascript'></script>
    <script src='/Content/assets/global/plugins/bootstrap/js/bootstrap.min.js' type='text/javascript'></script>
    <script src='~/Scripts/system.common.js' type='text/javascript'></script>
</head>
<body class="container-main">
    @using (Ajax.BeginForm("Install", "Install", new AjaxOptions
    {
        Confirm = ILS.GetResource("ConfirmInstall"),
        HttpMethod = "POST",
        OnBegin = "Installation.onStart",
        OnComplete = "Installation.onComplete",
        OnFailure = "Installation.onFailure",
        OnSuccess = "Installation.onSuccess"
    }, new { @class = "form-horizontal", autocomplete = "on" }))
    {

        <script type="text/javascript">

            $(document).ready(function () {
                $('input:radio[name=DataProvider]').click(toggleProvider);
                $('input:radio[name=SqlConnectionInfo]').click(toggleSqlConnectionInfo);
                $('input:radio[name=SqlAuthenticationType]').click(toggleSqlAuthenticationType);
                $("input:checkbox[name=UseCustomCollation]").click(toggleCollation);

                toggleProvider();
                toggleSqlConnectionInfo();
                toggleSqlAuthenticationType();
                toggleCollation();
            });

            function hide(el, thenShow) {
                $(el).slideUp(300, "easeOutQuad", function () {
                    if (thenShow) {
                        show($(thenShow));
                    }
                });
            }

            function show(el) {
                $(el).slideDown(300, "easeInQuad");
            }

            function toggleProvider() {
                var selectedProvider = $("input[name=DataProvider]:checked").attr('id');
                if (selectedProvider == 'provider_sqlce') {
                    hide('#sqlConnectionInfo');
                }
                else if (selectedProvider == 'provider_sqlserver') {
                    show('#sqlConnectionInfo');
                }
            }

            function toggleSqlConnectionInfo() {
                var selectedProvider = $("input[name=SqlConnectionInfo]:checked").attr('id');
                if (selectedProvider == 'sqlconnectioninfo_values') {
                    hide('#sqlDatabaseConnectionString', '#sqlDatabaseInfo');
                }
                else if (selectedProvider == 'sqlconnectioninfo_raw') {
                    hide('#sqlDatabaseInfo', '#sqlDatabaseConnectionString');
                }
            }

            function toggleSqlAuthenticationType() {
                var selectedProvider = $("input[name=SqlAuthenticationType]:checked").attr('id');
                if (selectedProvider == 'sqlauthenticationtype_sql') {
                    $('#pnlSqlAuth input').removeAttr("disabled");
                }
                else if (selectedProvider == 'sqlauthenticationtype_windows') {
                    $('#pnlSqlAuth input').attr("disabled", "disabled");
                }
            }


            function toggleCollation() {
                if ($('#UseCustomCollation').is(':checked')) {
                    $('#Collation').removeAttr("disabled");
                }
                else {
                    $('#Collation').attr("disabled", "disabled");
                }
            }

        </script>

        <div class="container">

            <div class="install-head clearfix">
                <div class="logo pull-left">
                    <img src="~/Content/images/mayisite.com-200-black.png" alt="MayiSite.Com" />
                </div>
                <h1 class="install-title pull-right">@ILS.GetResource("Title")</h1>
            </div>
            <div class="install-panel form-wizard">
                <div class="install-content form-body">
                    <p>@ILS.GetResource("Tooltip1")</p>
                    <p>@ILS.GetResource("Tooltip2")</p>
                    <div id="messages" class="alert alert-danger fade hide">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        @Html.ValidationSummary(false)
                    </div>

                    <h3 class="block">
                        <i class="install-icon fa fa-shopping-cart"></i>
                        @ILS.GetResource("SiteInformation")
                    </h3>
                    <div class="form-group ">
                        <label class="control-label col-md-3" for="AdminEmail">@ILS.GetResource("AdminEmail")</label>
                        <div class="col-md-6">
                            @Html.TextBoxFor(x => x.AdminEmail, new { @class = "form-control" })
                            @Html.ValidationMessageFor(x => x.AdminEmail)
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="control-label col-md-3" for="AdminPassword">@ILS.GetResource("AdminPassword")</label>
                        <div class="col-md-6">
                            @Html.PasswordFor(x => x.AdminPassword, new { @class = "form-control" })
                            @Html.ValidationMessageFor(x => x.AdminPassword)
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="control-label col-md-3" for="ConfirmPassword">@ILS.GetResource("ConfirmPassword")</label>
                        <div class="col-md-6">
                            @Html.PasswordFor(x => x.ConfirmPassword, new { @class = "form-control" })
                            @Html.ValidationMessageFor(x => x.ConfirmPassword)
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="control-label col-md-3" for="PrimaryLanguage">@ILS.GetResource("PrimaryLanguage")</label>
                        <div class="col-md-6">
                            @Html.DropDownListFor(x => x.PrimaryLanguage, Model.AvailableAppLanguages, new { @class = "form-control" })
                            @Html.ValidationMessageFor(x => x.PrimaryLanguage)
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="control-label col-md-3" for="MediaStorage">@ILS.GetResource("MediaStorage.Label")</label>
                        <div class="col-md-6">
                            @Html.DropDownListFor(x => x.MediaStorage, Model.AvailableMediaStorages, new { @class = "form-control" })
                            @Html.ValidationMessageFor(x => x.MediaStorage)
                            <span class="help-block muted" style="margin-top: 4px">
                                @ILS.GetResource("MediaStorage.Hint"):
                            </span>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="control-label col-md-3"></label>
                        <div class="col-md-9">
                            <div class="checkbox-list">
                                <label>
                                    @Html.CheckBoxFor(x => x.InstallSampleData)
                                    @ILS.GetResource("CreateSampleData")
                                </label>

                            </div>
                        </div>
                    </div>
                    <h3 class="block">
                        <i class="install-icon fa fa-cogs"></i>
                        @ILS.GetResource("DatabaseInformation")
                    </h3>

                    <div class="form-group ">
                        <label class="control-label col-md-3"></label>
                        <div class="col-md-9">
                            <label class="radio">
                                @ILS.GetResource("SqlCompact")
                                @Html.RadioButton("DataProvider", "sqlce", (Model.DataProvider == "sqlce"), new { id = "provider_sqlce" })
                            </label>
                            <label class="radio">
                                @ILS.GetResource("SqlStandard") <strong>@ILS.GetResource("Recommended")</strong>
                                @Html.RadioButton("DataProvider", "sqlserver", (Model.DataProvider == "sqlserver"), new { id = "provider_sqlserver" })
                            </label>
                        </div>
                    </div>
                    <div id="sqlConnectionInfo" style="display: none">
                        <div class="form-group ">
                            <label class="control-label col-md-3"></label>
                            <div class="col-md-9">
                                <div class="radio-list">
                                    <label class="radio-inline">
                                        @Html.RadioButton("SqlConnectionInfo", "sqlconnectioninfo_values", (Model.SqlConnectionInfo == "sqlconnectioninfo_values"), new { id = "sqlconnectioninfo_values" })
                                        @ILS.GetResource("ConnectionStringValues")
                                    </label>
                                    <label class="radio-inline">
                                        @Html.RadioButton("SqlConnectionInfo", "sqlconnectioninfo_raw", (Model.SqlConnectionInfo == "sqlconnectioninfo_raw"), new { id = "sqlconnectioninfo_raw" })
                                        @ILS.GetResource("RawConnectionString")
                                    </label>

                                </div>

                            </div>
                        </div>
                        <div id="sqlDatabaseInfo">
                            <div class="form-group ">
                                <label class="control-label col-md-3" for="SqlServerName">@ILS.GetResource("SqlServerName")</label>
                                <div class="col-md-6">
                                    @Html.TextBoxFor(x => x.SqlServerName, new { @class = "form-control" })
                                </div>
                            </div>
                            <div class="form-group ">
                                <label class="control-label col-md-3" for="SqlDatabaseName">@ILS.GetResource("DatabaseName")</label>
                                <div class="col-md-6">
                                    @Html.TextBoxFor(x => x.SqlDatabaseName, new { @class = "form-control" })
                                </div>
                            </div>
                            <div class="form-group ">
                                <label class="control-label col-md-3"></label>
                                <div class="col-md-9">
                                    <div class="radio-list">
                                        <label class="radio-inline">
                                            @Html.RadioButton("SqlAuthenticationType", "sqlauthentication", (Model.SqlAuthenticationType == "sqlauthentication"), new { id = "sqlauthenticationtype_sql" })
                                            @ILS.GetResource("SqlAuthentication")
                                        </label>
                                        <label class="radio-inline">
                                            @Html.RadioButton("SqlAuthenticationType", "windowsauthentication", (Model.SqlAuthenticationType == "windowsauthentication"), new { id = "sqlauthenticationtype_windows" })
                                            @ILS.GetResource("WindowsAuthentication")
                                        </label>

                                    </div>

                                </div>
                            </div>
                            <div id="pnlSqlAuth">
                                <div class="form-group ">
                                    <label class="control-label col-md-3" for="SqlServerUsername">@ILS.GetResource("SqlServerUsername")</label>
                                    <div class="col-md-6">
                                        @Html.TextBoxFor(x => x.SqlServerUsername, new { @class = "form-control" })
                                    </div>
                                </div>
                                <div class="form-group ">
                                    <label class="control-label col-md-3" for="SqlServerPassword">@ILS.GetResource("SqlServerPassword")</label>
                                    <div class="col-md-6">
                                        @Html.PasswordFor(x => x.SqlServerPassword, new { @class = "form-control" })
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="sqlDatabaseConnectionString">
                            <div class="form-group ">
                                <label class="control-label col-md-3" for="DatabaseConnectionString">@ILS.GetResource("ConnectionString")</label>
                                <<div class="col-md-6">
                                    @Html.TextBoxFor(x => x.DatabaseConnectionString, new { @class = "form-control", style = "width:90%;" })
                                    <span class="help-block muted" style="margin-top: 4px">
                                        @ILS.GetResource("Example"):
                                        Data Source=sqlServerName;Initial Catalog=dbName;Persist Security Info=True;User
                                        ID=userName;Password=password
                                        <br />
                                        Find more info <a href="http://www.connectionstrings.com/" rel="nofollow" target="_blank">here</a>
                                    </span>
                                </div>

                            </div>
                        </div>
                        <div>
                            <div class="form-group ">
                                <label class="control-label col-md-3"></label>
                                <div class="col-md-9">
                                    <div class="checkbox-list">
                                        <label>
                                            @Html.CheckBoxFor(x => x.SqlServerCreateDatabase)
                                            @ILS.GetResource("CreateDatabaseIfDoesNotExist")
                                        </label>

                                    </div>
                                </div>

                            </div>
                            <div class="form-group ">
                                <label class="control-label col-md-3"></label>
                                <div class="col-md-6">
                                    <div class="checkbox-list">
                                        <label>
                                            @Html.CheckBoxFor(x => x.UseCustomCollation)
                                            @ILS.GetResource("CustomCollation")
                                        </label>

                                    </div>
                                    @Html.TextBoxFor(x => x.Collation, new { @class = "form-control", disbaled = "disabled" })
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="text-align: center; margin-top: 20px">
                        <button type="submit" id="install-button" class="btn btn-warning btn-large">
                            <i class="fa fa-cogs" style="margin-right: 4px;"></i>
                            <strong>@ILS.GetResource("Install")</strong>
                        </button>
                    </div>

                </div>

                <div class="form-actions container-footer  clearfix">
                    <div class="pull-left">
                        <a class="btn" href="@Url.Action("RestartInstall", "Install")" title="@ILS.GetResource("RestartInstallationTooltip")" rel="nofollow">
                            @ILS.GetResource("RestartInstallation")
                        </a>
                    </div>
                    <div class="pull-right">

                    </div>
                </div>
            </div>
        </div>



    }
    @* scripts (foot) *@
    <script src='~/Scripts/jquery-ui/core.js' type='text/javascript'></script>
    <script src='~/Scripts/jquery-ui/effect.js' type='text/javascript'></script>
    <script src='~/Scripts/jquery.unobtrusive-ajax.min.js' type='text/javascript'></script>
    <script src='~/Scripts/jquery.validate.min.js' type='text/javascript'></script>
    <script src='~/Scripts/jquery.validate.unobtrusive.min.js' type='text/javascript'></script>
    <script src='~/Content/js/cms.system.js' type='text/javascript'></script>
    <script src='~/Scripts/underscore.min.js' type='text/javascript'></script>
    <script src='~/Scripts/underscore.string.min.js' type='text/javascript'></script>
    <script src='~/Scripts/underscore.mixins.js' type='text/javascript'></script>
    <script src='~/Scripts/jquery.transit.js' type='text/javascript'></script>
    <script src='~/Scripts/jquery.addeasing.js' type='text/javascript'></script>
    <script src='~/Content/throbber/cms.throbber.js' type='text/javascript'></script>
    <script src='~/Scripts/jquery.scrollTo.js' type='text/javascript'></script>
    <script src='~/Scripts/jquery.serialScroll.js' type='text/javascript'></script>

    <script>
        var Installation = (function () {

            var progressIntervall;

            function checkProgress() {
                $.ajax({
                    url: '@Url.Action("Progress", "Install")',
                    dataType: "json",
                    async: true,
                    type: "POST",
                    cache: false,
                    success: function (data, status) {
                        console.log(data);

                        if (!data.Completed) {
                            if (data.ProgressMessage !== undefined && _.isString(data.ProgressMessage) && data.ProgressMessage) {
                                $("#install-progress").html(data.ProgressMessage);
                            }
                        }
                        else {
                            $("#install-progress").html("");
                        }
                    },
                    error: function () {
                        console.log("ERROR");
                        handleError(arguments[0].responseText);
                    }
                });
            }

            function finalizeInstallation(success) {
                $.ajax({
                    url: '@Url.Action("Finalize", "Install")',
                    data: { restart: success },
                    dataType: "json",
                    async: false,
                    type: "POST"
                });
            }

            function handleError(errors) {
                var validationSummary = $("#messages");
                var ul = validationSummary.find("ul");
                ul.html("");

                if ($.isArray(errors)) {
                    for (i = 0; i < errors.length; i++) {
                        ul.append("<li>" + errors[i] + "</li>");
                    }
                }
                else {
                    ul.append("<li>" + errors + "</li>");
                }
                validationSummary.removeClass("hide");
                validationSummary.addClass("in");
                $.scrollTo(validationSummary, 800, { offset: -10 });
                $("#install-button").removeAttr("disabled");

                $("#install-progress").html("");
            }

            return {

                onStart: function (context) {

                    $.throbber.show({
                        //message: '<span id="install-message">@ILS.GetResource("Installing")</span>' + '<br /><span id="install-progress" style="font-size: 16px"></span>',
                        message: '<div id="install-message">@ILS.GetResource("Installing")</div><div id="install-progress" style="font-size: 16px; font-weight: 400; margin: 10px 0 30px 0"></div>',
                    });

                    // start the checkprogress interval
                    progressIntervall = window.setInterval(checkProgress, 1500);

                    $("#install-button").attr("disabled", "disabled");

                },

                onSuccess: function (data) {

                    finalizeInstallation(data.Success);

                    if (data.Success) {
                        $("#install-message").html("@ILS.GetResource("Common.StartShop")");
                        $("#install-progress").html("");
                        setLocation(data.RedirectUrl);
                    }
                    else {
                        $.throbber.hide();
                        if (data.HasErrors) {
                            handleError(data.Errors);
                        }
                    }
                },

                onFailure: function (context) {
                    handleError(context);
                },

                onComplete: function () {
                    window.clearInterval(progressIntervall);
                    $("#install-button").removeAttr("disabled");
                    $("#install-progress").html("");
                }

            };

        })();

    </script>
</body>
</html>
